<!-- 方案定制 -->
<template>
  <view class="customMode">
    <image src="../../static/schema_bg.png" class="header" mode="aspectFill"/>

    <view class="form">
      <view class="form-item">
        <view class="form-label">女士/先生</view>
        <CustomInput width="100%" :maxlength="6" placeholderStr="请输入姓名" @input="e => name = e" :value="name"></CustomInput>
      </view>

      <picker
        header-text="请选择户型"
        mode="selector"
        :range="houseTypeList"
        range-key="name"
        @change="selectHouse"
      >
        <view class="form-item">
          <view class="form-label">户型</view>
          <CustomInput placeholderStr="请选择户型" isDisabled @input="e => typeName = e" :value="typeName"></CustomInput>
        </view>
      </picker>

      <view class="form-wrap">
        <view class="form-item">
          <view class="form-label">户型面积</view>
          <CustomInput width="60%" placeholderStr="请输入" type="digit" @input="e => area = e" :value="area" unit="平方米"></CustomInput>
        </view>

        <view class="form-item">
          <view class="form-label">居住人口</view>
          <CustomInput width="60%" placeholderStr="请输入" type="number" @input="e => toll = e" :value="toll" v-model="toll" unit="人"></CustomInput>
        </view>
      </view>
    </view>
    
    <view class="generate-btn" @click="generateMode()">生成方案</view>
    
    <view style="background-color: rgb(250, 250, 250);height: 300rpx"></view>
    
    <view class="footer-wrap">
      <view class="footer">
        <view class="tab-item home" @click="goPage('/pages/home/home')">
          <img src="../../static/home/home.png" class="tabbar-icon">
          <text class="tabbar-text active">首页</text>
        </view>
        <view class="tab-item product" @click="goPage('/pages/tabbar/tabbar?label=厨下&code=1')">
          <img src="../../static/home/Live.png" class="tabbar-icon">
          <text class="tabbar-text">产品</text>
          <view class="active-icon"></view>
        </view>
        <view class="tab-item type" @click="goPage('/pages/tabbar/tabbar?label=户型&code=5')">
          <img src="../../static/home/menu.png" class="tabbar-icon">
          <text class="tabbar-text">户型</text>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
import CustomInput from "../../components/CustomInput/CustomInput.vue";
import requestV1 from "../../common/requestV1";
export default {
  components: {
    CustomInput
  },
  created() {
    this.getHouseTypeList()
  },
  data() {
    return {
      name: '',
      type: null,
      typeName: '',
      area: null,
      toll: null,
      houseTypeList: []
    }
  },
  methods: {
    async getHouseTypeList() {
      const data = await requestV1({
        url: '/footmarks/homestye',
        type: 'get'
      })
      this.houseTypeList = data.data
    },
    selectHouse(event) {
      this.type = this.houseTypeList[event.detail.value].id
      this.typeName = this.houseTypeList[event.detail.value].name
    },
    generateMode() {
      if (!this.name) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请输入姓名'
        })
        return
      }
      if (!this.type) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请选择户型'
        })
        return
      }
      if (!this.area) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请输入户型面积'
        })
        return
      }
      if (!this.toll) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: '请输入居住人口'
        })
        return
      }

      const queryString = `?name=${this.name}&type=${this.type}&area=${this.area}&toll=${this.toll}`
      this.goPage('/pages/generate/generate' + queryString)
    },
    goPage(url, links) {
      url = links
        ? url + '?url=' + links
        : url

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.customMode {
  background-color: rgb(250, 250, 250);
  min-height: 730rpx;
  height: 100vh;
  overflow: auto;
  .header {
    width: 100%;
  }

  .form {
    background-color: rgb(250, 250, 250);
    padding: 0 42rpx;
    margin-bottom: 176rpx;
    .form-item {
      height: 188rpx;
      .form-label {
        color: rgba(26, 26, 26, 1);
        font-size: 24rpx;
        line-height: 58rpx;
        font-weight: 600;
      }
      .form-input {}
    }
    .form-wrap {
      display: flex;
      justify-content: space-between;
      .form-item {
        width: calc(50% - 24rpx);
        height: 188rpx;
        .form-label {
          color: rgba(26, 26, 26, 1);
          font-size: 24rpx;
          line-height: 58rpx;
          font-weight: 600;
        }
        .form-input {}
      }
    }
  }
  
  .generate-btn {
    width: calc(100% - 86rpx);
    height: 112rpx;
    line-height: 112rpx;
    background-color: rgba(55, 68, 134, 1);
    text-align: center;
    margin: 0 auto;
    color: rgba(255, 255, 255, 1);
    font-weight: 800;
    font-size: 28rpx;
    border-radius: 35rpx;
  }

  .footer-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 210rpx;
    background: rgb(250, 250, 250) url("../../static/home/tabbar-bg.png") center center no-repeat;
    .footer {
      width: 100%;
      height: 100%;
      background: url("../../static/home/circle.png") center 70rpx no-repeat;
      display: flex;
      justify-content: space-around;
      .tab-item {
        position: relative;
        margin-top: 110rpx;
        display: flex;
        flex-direction: column;
        .tabbar-icon {
          width: 54rpx;
          height: 54rpx;
          margin-bottom: 8rpx;
        }
        .tabbar-text {
          text-align: center;
          font-size: 27rpx;
          color: rgba(137, 137, 136, 1);
        }
        .active-icon {
          width: 56rpx;
          height: 12rpx;
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background: url("../../static/customMode/active.png") center center no-repeat;
        }
      }
      .product {
        margin-top: 78rpx;
        .tabbar-icon {
          width: 74rpx;
          height: 74rpx;
          margin-bottom: 0;
        }
        .tabbar-text {
          color: rgba(255, 255, 255, 1);
          margin-top: -8rpx;
        }
      }
      .active {
        color: rgba(55, 68, 134, 1) !important;
      }
    }
  }
}
</style>
